<template>
    <view class="columnbox wdh-100 content">
        <view class="info-box wdh-100 columnbox">
            <view class="rowbox wdh-100 spb">
                <view style="font-size: 32rpx;font-weight: bold;">发布单品快卖</view>
                <view class="rowbox small-btn" @click="chooseTem">选择推荐方案</view>
            </view>
            <view class="columnbox wdh-100 desc-box">
                <view class="wdh-100 desc-title">已为您自定生成一个方案</view>
                <view class="rowbox wdh-100 one-info spb">
                    <view>快卖商品</view>
                    <input @blur="getWenAn" v-model="name" placeholder-class="noinfo" placeholder="点击输入" />
                </view>
                <view class="rowbox wdh-100 one-info spb">
                    <view>商品原价</view>
                    <input v-model="original" type="digit" placeholder-class="noinfo" placeholder="点击输入" />
                </view>
                <view class="rowbox wdh-100 one-info spb">
                    <view>快卖价格</view>
                    <input v-model="price" type="digit" placeholder-class="noinfo" placeholder="点击输入" />
                </view>
                <view class="rowbox wdh-100 one-info spb">
                    <view>结束日期</view>
                    <view class="rowbox">
                        发布后
                        <input style="width: 200rpx;margin-right: 10rpx;" v-model="day" type="number"
                            placeholder-class="noinfo" placeholder="点击输入" />
                        天
                    </view>
                </view>
                <view class="rowbox wdh-100 one-info spb">
                    <view>快卖标题</view>
                    <input v-model="title" placeholder-class="noinfo" placeholder="点击输入" />
                </view>
            </view>
        </view>
        <view class="info-box wdh-100 columnbox">
            <view class="rowbox wdh-100 spb">
                <view style="font-size: 32rpx;font-weight: bold;">产品详情</view>
                <view @click="getWenAn" class="rowbox small-btn">换个文案</view>
            </view>
            <view class="info-box wdh-100 columnbox">
                <textarea v-model="copywriting" placeholder="请输入产品详情" class="content-box"></textarea>
                <view class="rowbox img-box" v-for="(item,index) in images" :key='index'>
                    <image :src="item" mode="aspectFill">
                    </image>
                    <view class="rowbox delet-box" @click="deletImg(index)">
                        <u-icon size="70rpx" name="close-circle-fill"></u-icon>
                    </view>
                </view>
                <view class="rowbox img-box" v-for="(item,index) in uploadImg" :key='index'>
                    <image :src="item" mode="aspectFill">
                    </image>
                    <view class="rowbox delet-box" @click="deletUploadImgImg(index)">
                        <u-icon size="70rpx" name="close-circle-fill"></u-icon>
                    </view>
                </view>

                <view class="rowbox add-btn" @click="addImg">+添加新图片</view>
                <view class="wdh-100" style="height: 200rpx;"></view>
            </view>
        </view>

        <!-- <view class="img-list wdh-100">
        	<view class="tit">
        		商品图片
        	</view>
        	<u-upload max-count="1" ref="upload" @afterRead="afterRead" @delete="deletePic" name="1"
        		:deletable="true" :previewImage="true" :file-list="fileList1"></u-upload>
        </view> -->



        <view class="bottom-box wdh-100 rowbox">
            <view @click="handleSubmit" class="one-btn rowbox def-bgcol">保存</view>
        </view>
        <IosKefu :show="showIosKefu" :type="matype" @close="closeIosKefu"></IosKefu>
        <AndrTaocan :show="showAndrTaocan" :taocanid="5" @close="closeAndrTaocan" @refsh="handlerefsh"></AndrTaocan>
        <u-popup mode="center" @close="temflag=false,curtem=0" :show="temflag" round="20rpx">
            <view class="columnbox tem-box">
                <view class="rowbox tem-title">充值购推荐方案</view>
                <scroll-view scroll-y class="wdh-100" style="height: 40vh;">
                    <view @click="curtem=index" class="rowbox spb one-type" v-for="(item,index) in temList"
                        :key='index'>
                        {{item.name}}
                        <image v-if="curtem==index" class="tem-icon" src="/static/img/sel.png" mode="widthFix"></image>
                        <image v-else class="tem-icon" src="/static/img/unsel.png" mode="widthFix"></image>
                    </view>
                </scroll-view>
                <view class="rowbox wdh-100 tem-btn">
                    <view class="rowbox" @click="temflag=false,curtem=0">取消</view>
                    <view class="rowbox" @click="userTem">使用此方案</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import IosKefu from '@/components/ioskefu.vue'
    import AndrTaocan from '@/components/andrtaocan.vue'
    export default {
        components: {
            IosKefu,
            AndrTaocan
        },
        data() {
            return {
                showAndrTaocan: false,
                showIosKefu: false,
                matype: '',
                userinfo: null,
                name: "",
                title: '',
                fileList1: [],
                id: 0,
                price: '',
                copywriting: '',
                images: [],
                uploadImg: [],
                submitflag: false,
                original: '',
                temList: [],
                temflag: false,
                curtem: 0,
                day: ''
            }
        },
        onShow() {
            if (uni.getStorageSync('uid')) {
                this.userinfo = uni.getStorageSync('userInfo')
            }
        },
        onLoad(options) {
			console.log('options',options)
            if (options.id) {
                this.id = parseInt(options.id)
                this.getGoodsDetail()
            }
        },
        methods: {
            userTem() {
                this.temflag = false
                this.name = this.temList[this.curtem].name
                this.original = this.temList[this.curtem].original
                this.price = this.temList[this.curtem].price
                this.day = this.temList[this.curtem].day
                this.title = this.temList[this.curtem].title
                if (this.name != '') {
                    this.getWenAn()
                }
            },
            //选择方案
            chooseTem() {
                this.$req.post('/shanghu/shuiguotj').then(res => {
                    this.temList = res.data.data
                    this.temflag = true
                })
            },
            deletUploadImgImg(index) {
                this.uploadImg.splice(index, 1)
            },
            deletImg(index) {
                this.images.splice(index, 1)
            },
            addImg() {
                uni.chooseImage({
                    success: (res) => {
                        this.uploadImg = this.uploadImg.concat(res.tempFilePaths)
                    }
                })
            },
            getWenAn() {
                if (this.name == '') {
                    uni.showToast({
                        title: '请输入快卖商品',
                        icon: 'none'
                    })
                } else {
                    this.$req.post('/shanghu/copywritingscreen', {
                        name: this.name
                    }).then(res => {
                        // this.title = res.data.data.kuaimai
                        this.uploadImg = []
                        this.copywriting = res.data.data.data.content
                        this.images = res.data.data.data.images.split(',')
                    })
                }
            },
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            closeIosKefu() {
                this.showIosKefu = false
            },
            handlerefsh() {
                this.handleSubmit()
            },
            closeAndrTaocan() {
                this.showAndrTaocan = false
            },
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                console.log(event)
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            //上传图片
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {

                    let a = uni.uploadFile({
                        url: 'https://dscc.suishilian.com/admin/uploadFile', // 仅为示例，非真实的接口地址
                        filePath: url,
                        name: 'file',
                        formData: {
                            user: 'test'
                        },
                        success: (res) => {
                            let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
                            resolve(data.data)
                        }
                    });
                })
            },


            getGoodsDetail() {
                this.$req.post('/shanghu/danpininfo', {
                    id: this.id
                }).then(res => {
                    let info = res.data.data
                    this.name = info.name
                    this.price = info.price
                    this.title = info.title
                    this.day = info.day
                    this.original = info.original
                    this.images = info.image.split(',')
                    this.copywriting = info.content
                })
            },
            handleSubmit() {
                if (!this.name) {
                    uni.showToast({
                        title: '请输入快卖商品',
                        icon: 'none'
                    })
                    return
                }
                if (!this.original) {
                    uni.showToast({
                        title: '请输入商品原价',
                        icon: 'none'
                    })
                    return
                }
                if (!this.price) {
                    uni.showToast({
                        title: '请输入快卖价格',
                        icon: 'none'
                    })
                    return
                }
                if (!this.title) {
                    uni.showToast({
                        title: '请输入快卖标题',
                        icon: 'none'
                    })
                    return
                }
                if (!this.copywriting) {
                    uni.showToast({
                        title: '请输入产品详情',
                        icon: 'none'
                    })
                    return
                }
                if (this.images.length == 0 && this.uploadImg.length == 0) {
                    uni.showToast({
                        title: '请上传图片',
                        icon: 'none'
                    })
                    return
                }
                if (!this.submitflag) {
                    this.submitflag = true
                    let userInfo = uni.getStorageSync('userInfo')
                    if (userInfo.shanghuid == 0) {
                        this.submitflag = false
                        uni.navigateTo({
                            url: '/pages/iden/iden'
                        })
                    } else {
                        this.$req.post('/shanghu/shanghuuserInfo', {
                            uid: uni.getStorageSync('uid')
                        }).then((res) => {
                            let data = res.data.data
                            if (data.dpkm === 1 && data.dpkminttime === 0) {
                                this.submitflag = false
                                if (wx.getSystemInfoSync().system.indexOf('Android') > -1) {
                                    this.showAndrTaocan = true
                                } else {
                                    this.matype = 'dpkmimg'
                                    this.showIosKefu = true
                                }
                            } else if (data.dpkm === 1 && data.dpkminttime > 0) {
                                this.submitflag = false
                                if (wx.getSystemInfoSync().system.indexOf('Android') > -1) {
                                    this.showAndrTaocan = true
                                } else {
                                    this.matype = 'dpkmimg'
                                    this.showIosKefu = true
                                }
                            } else {
                                this.sendInfo()
                            }
                        })
                    }
                }
            },
            async sendInfo() {
                uni.showLoading({
                    title: '提交中'
                })
                let list = []
                for (var i = 0; i < this.uploadImg.length; i++) {
                    let img = await this.sendImg(this.uploadImg[i])
                    list.push(img)
                }
                let req = {
                    original: Number(this.original),
                    name: this.name,
                    title: this.title,
                    price: Number(this.price),
                    image: this.images.join(',') + ',' + list,
                    content: this.copywriting,
                    shanghuid: this.userinfo.shanghuid || '',
                    day: Number(this.day)
                }

                let url = ''
                if (this.id) {
                    url = '/shanghu/danpinupdate'
                    req.id = this.id
                    delete req.shanghuid
                } else {
                    url = '/shanghu/danpinadd'
                }
                this.$req.post(url, req).then((res) => {
                    this.submitflag = false
                    uni.hideLoading()
                    let data = res.data
                    console.log(data)
                    if (data.code === 0) {
                        uni.showToast({
                            mask: true,
                            title: '保存成功',
                            duration: 500,

                        })
                        setTimeout(() => {
                            // uni.navigateBack()
							uni.redirectTo({
								url:"/pages/quicksale/quicksale"
							})
                        }, 500)
                    } else {
                        uni.showToast({
                            mask: true,
                            icon: 'none',
                            title: data.msg
                        })
                    }
                })
            },
            sendImg(url) {
                return new Promise(resolve => {
                    this.$req.uploadImg(url).then(res => {
                        console.log('==', res)
                        resolve(res.data.data)
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .beizhu {
        width: 100%;
        font-size: 30rpx;
        text-align: left;
        padding: 30rpx 32rpx 10rpx 32rpx;
        color: #999;
    }

    .img-list {
        padding-top: 32rpx;
        display: flex;

        justify-content: flex-start;

        .tit {
            font-size: 28rpx;
            margin-right: 30rpx;
        }
    }

    .content {
        min-height: 100vh;
        background: #f6f6f6;
        justify-content: flex-start;
        font-family: PingFang SC;
    }

    .info-box {
        padding: 20rpx 20rpx;
        margin-top: 20rpx;
        width: 710rpx;
        border-radius: 10rpx;
        background: #fff;
    }

    .one-info {
        padding: 20rpx 0;
        border-radius: 10rpx;
        font-size: 28rpx;
        line-height: 70rpx;

        input {
            text-align: right;
            width: calc(100% - 200rpx);
            font-size: 28rpx;
        }
    }

    .require-title {
        font-size: 28rpx;
        width: 100%;
        padding: 32rpx 20rpx;
        box-sizing: border-box;
        font-weight: bold;
    }

    .info-line {
        border-bottom: #f1eff3 solid 1px;
    }

    .bottom-box {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        background: #fff;
        padding: 20rpx 20rpx;
        padding-bottom: 40rpx;
        box-shadow: 0 0 4px 2px #eeecef;
    }

    .one-btn {
        width: 100%;
        font-size: 28rpx;
        height: 90rpx;
        border-radius: 20rpx;
        color: #fff;
    }

    .submit-btn {
        background: #eeecef;
        color: #606266;
    }

    .wenan-btn {
        margin-left: 20rpx;
        border-radius: 10rpx;
        padding: 10rpx 10rpx;
        color: #fff;
        font-size: 24rpx;
        background: #00c664;
        font-size: 24rpx;
        line-height: 40rpx;
    }

    .add-btn {
        width: 100%;
        border: #eeecef solid 1px;
        margin: 20rpx 0;
        border-radius: 10rpx;
        font-size: 28rpx;
        height: 90rpx;
    }

    .content-box {
        background: rgba(#f1eff0, 0.4);
        font-size: 28rpx;
        margin-top: 20rpx;
        border-end-start-radius: 10rpx;
        padding: 20rpx 20rpx;
        width: calc(100% - 40rpx);
    }

    .img-box {
        width: 100%;
        position: relative;
        height: 500rpx;
        margin-top: 20rpx;

        image {
            width: 100%;
            height: 500rpx;
        }

        .delet-box {
            position: absolute;
            top: 0;
            right: 0;
            width: 70rpx;
            height: 70rpx;
            background: rgba(#fff, 0.4);
            border-radius: 100rpx;
        }
    }

    .small-btn {
        font-size: 24rpx;
        color: #00c664;
        border: #00c664 solid 1px;
        line-height: 40rpx;
        padding: 0 20rpx;
        border-radius: 10rpx;
    }

    .desc-title {
        font-size: 24rpx;
        color: #606266;
        border-bottom: #e1e1e1 solid 1px;
        padding-bottom: 20rpx
    }

    .desc-box {
        padding: 20rpx 20rpx;
        background: rgba(#f1eff0, 0.4);
        border-radius: 10rpx;
        margin-top: 20rpx;
    }

    .tem-box {
        width: 700rpx;
    }

    .tem-title {
        padding: 20rpx 0;
        font-size: 28rpx;
        font-weight: bold;
    }

    .one-type {
        width: 90%;
        margin-left: 5%;
        padding: 20rpx 32rpx;
        border: #eeecef solid 1px;
        border-radius: 10rpx;
        font-size: 28rpx;
        margin-bottom: 20rpx;
    }

    .tem-icon {
        width: 28rpx;
        height: 28rpx;
    }

    .tem-btn {
        border-top: #f1eff0 solid 1px;
        padding: 20rpx 0;
        font-size: 28rpx;

        view {
            width: 40%;
            border-radius: 10rpx;
            margin: 0 20rpx;
        }
    }

    .tem-btn>view:nth-child(1) {
        height: 70rpx;
        color: #606266;
        border: #e1e1e1 solid 1px;
    }

    .tem-btn>view:nth-child(2) {
        height: 70rpx;
        color: #fff;
        background: #00c664;
    }
</style>
<style>
    .noinfo {
        color: #a7a8aa;
    }
</style>